<template>
  <div class="select-option">
    <button plain="true" class="select-item" v-for="(item,index) in optionList" :key="index" :class="{success:item.result==1,fail:item.result==0,word:qType==3,img:qType==1}" @click="checkAnswer(item)" @getuserinfo="getUserInfo($event)" open-type="getUserInfo" lang="zh_CN">
      <img v-if="item.result==1" src="/static/success.png" alt="">
      <img v-if="item.result==0" src="/static/fail.png" alt=""> {{item.name}}
    </button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["isTip", "qType", "subject", "isShare"],
  data() {
    return {
      tipList: [],
      optionList: []
    };
  },
  watch: {
    isTip() {
      this.makeTip(); //处理提示
    },
    tipList(val) {
      if (val.length == 0) {
        this.$emit("isPass");
      }
    },
    subject() {
      this.getTipList(); //初始化提示列表
      this.copyOptionList(); //深拷贝选项列表
    }
  },
  computed: {
    ...mapState(["energy", "tipEnergy", "userInfo", "isAuthorize"])
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    // 选出错误答案列表
    getTipList() {
      let optionList = this.subject.optionList;
      let list = [];
      for (let i = 0; i < optionList.length; i++) {
        if (optionList[i].sortId != this.subject.optionSortId) {
          list.push(i + 1);
        }
      }
      this.tipList = list;
    },
    copyOptionList() {
      this.optionList = JSON.parse(JSON.stringify(this.subject.optionList));
    },
    getUserInfo(event) {
      let data = event.mp.detail.userInfo;
      if (this.isAuthorize == 0 && data) {
        // data = event.mp.detail.userInfo;
        this.setUserInfo(data);
        wx.setStorage({
          key: "isAuthorize",
          data: "1"
        });
        this.store.commit("setAuthorize", 1);
        // TODO 调用授权接口处理业务
        console.log("调用授权接口一次");
      } else if (this.isAuthorize == 1 && !this.userInfo) {
        this.setUserInfo(data);
      }
    },
    checkAnswer(item) {
      if (this.isAuthorize == 1) {
        if (this.energy >= this.tipEnergy) {
          if (item.result == undefined) {
            if (this.subject.answer == item.name) {
              this.$set(item, "result", 1);
              this.$emit("getSuccess", item.name);
            } else {
              this.$set(item, "result", 0);
              for (let i = 0; i < this.tipList.length; i++) {
                if (item.sortId == this.tipList[i]) {
                  this.tipList.splice(i, 1);
                }
              }
              this.$emit("getFail", "answer");
            }
          }
        } else {
          if (this.isShare) {
            if (item.result == undefined) {
              if (this.subject.answer == item.name) {
                this.$set(item, "result", 1);
                this.$emit("getSuccess", item.name);
              } else {
                this.$set(item, "result", 0);
                for (let i = 0; i < this.tipList.length; i++) {
                  if (item.sortId == this.tipList[i]) {
                    this.tipList.splice(i, 1);
                  }
                }
                this.$emit("getFail", "answer");
              }
            }
          } else {
            wx.showToast({
              title: "体力不足",
              icon: "none"
            });
            this.$emit("outEnergy");
          }
        }
      }
    },
    // TODO 过关判断
    makeTip() {
      if (this.tipList.length > 0) {
        let index = this.tipList[0];
        for (let i = 0; i < this.optionList.length; i++) {
          if (this.optionList[i].sortId == this.tipList[0]) {
            this.$set(this.optionList[i], "result", 0);
          }
        }
        this.tipList.shift();
        this.$emit("getFail", "tip");
      }
      // if (this.energy >= this.tipEnergy) {
      // } else {
      //   console.log("tilibuzu");
      //   wx.showToast({
      //     title: "体力不足",
      //     icon: "none"
      //   });
      //   this.$emit("outEnergy");
      // }
    }
  },
  mounted() {
    this.getTipList(); //初始化提示列表
    this.copyOptionList(); //深拷贝选项列表
  }
};
</script>

<style lang="scss" scoped>
.select-option {
  padding-bottom:20rpx;
}
.select-item {
  width: 500rpx;
  height: 90rpx;
  margin: 0 auto 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 6rpx solid #fff;
  border-radius: 999px;
  background: #fff;
  font-size: 30rpx;
  font-weight: bold;
  color: #f46185;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }
  img {
    width: 37rpx;
    height: 37rpx;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20rpx;
  }
}
.word {
  height: 106rpx;
  margin-bottom: 24rpx;
}
.img {
  height: 76rpx;
  margin-bottom: 24rpx;
}
.success {
  background: #98c63f;
  color: #fff;
  animation: scale 0.5s ease;
}
.fail {
  background: #e55f80;
  color: #fff;
  animation: scale 0.3s ease;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>
